import React, { Component } from 'react'
import axios from 'axios'
import Hrader from '../../../components/head/hrader'
import './myCollect.less'
import cookies from 'js-cookie'
class MyCollect extends Component {
    constructor() {
        super()
        this.state = {
            headtitle: { title: '我的收藏', path: '/my', age: '管理' },
            mycollectdata: [],//收藏的数据
            manageNowIndex: 0,
        }
    }
    render() {
        let { mycollectdata, manageNowIndex } = this.state
        console.log(mycollectdata, manageNowIndex);
        return (
            <div className="myCollect_box">
                <div className="myCollect_header">
                    <Hrader title={this.state.headtitle} subBtn={this.manage} />
                </div>
                <div className={manageNowIndex === 0 ? 'myCollect_body' : 'myCollect_bodys'}>
                    {mycollectdata.map((item, index) => {
                        return <div key={item.collect_id}>
                            {manageNowIndex === 1 ? <div className='checkbox'><input type="checkbox" id={index} checked={item.flag}
                                onChange={() => { this.checkboxLable(item.collect_id) }}
                            /></div> : null}

                            <div className="myCollect_content">
                                <p onClick={() => { this.details(item.commodity_id, item.commodity_images[0]) }}><img className='myCollect_images' src={item.commodity_images[0]} alt="" /></p>
                                <div onClick={() => { this.details(item.commodity_id, item.commodity_images[0]) }} className="myCollect_details">
                                    <p className="myCollect_mess" style={{ width: `${manageNowIndex === 1 ? '40vw' : '52vw'}` }}>{item.commodity_mess}</p>
                                    <p className="myCollect_unitPrice">￥：{item.commodity_unitPrice[0]}</p>
                                </div>
                                {manageNowIndex === 1 ? <label htmlFor={index} className="lables" ></label> : null}
                            </div>
                            <p className="myCollect_detailsBtn" onClick={() => { this.details(item.commodity_id, item.commodity_images[0]) }}>详情</p>
                        </div>
                    })}
                </div>
                {manageNowIndex === 1 ? <div className="myCollect_allSelect">
                    <div className="myCollect_allcontent">
                        <div className="myCollect_allcontentBox">
                            <input type="checkbox" name="" id="allSelect" checked={this.all} onChange={(e) => { this.all = e.target.checked }} />
                            <label htmlFor="allSelect" className="allSelectTitle">全选</label>
                        </div>
                        <div className="delTitle" onClick={() => { this.delTitle() }}>删除</div>
                    </div>
                </div> : null}
            </div >
        )
    }
    componentDidMount() {
        this.data()
    }
    // 获取数据
    data = () => {
        axios({
            method: 'post',
            url: '/api/front_end/myCollect',
            data: {
                user_id: cookies.get('user_id')
            }
        }).then(res => {
            // console.log(res.data);

            if (res.data.code === '01') {
                let allData = res.data.data
                allData.forEach(item => {
                    item.flag = false
                })
                this.setState({ mycollectdata: allData })
            }
        })
    }
    //管理按钮
    manage = () => {
        let { manageNowIndex } = this.state
        if (manageNowIndex === 0) {
            this.setState({ manageNowIndex: 1, headtitle: { title: '我的收藏', path: '/my', age: '完成' }, })
        } else {
            this.setState({ manageNowIndex: 0, headtitle: { title: '我的收藏', path: '/my', age: '管理' }, })
        }

    }
    //详情
    details = (commodity_id, commodity_image) => {
        console.log(commodity_id, commodity_image);
        sessionStorage.setItem('shop_img', JSON.stringify(commodity_image))
        sessionStorage.setItem('shop_id', JSON.stringify(commodity_id))
        sessionStorage.setItem('shop_router', JSON.stringify(this.props.history.location.pathname))
        this.props.history.push('/itemdetail')
    }
    // 选择
    checkboxLable = (collect_id) => {
        let { mycollectdata } = this.state
        if (mycollectdata.length > 0) {

            let finds = mycollectdata.find(item => item.collect_id === collect_id)
            if (finds.flag) {
                finds.flag = false;
            } else {
                finds.flag = true;
            }
            this.setState({ mycollectdata })
        }
    }
    // 全选
    get all() {
        let { mycollectdata } = this.state
        return mycollectdata.every(item => item.flag)
    }
    set all(f) {
        let { mycollectdata } = this.state
        mycollectdata.forEach((item) => {
            item.flag = f
        })
        // console.log(mycollectdata);
        this.setState({ mycollectdata })
    }
    // 删除
    delTitle = () => {
        let { mycollectdata, } = this.state
        if (mycollectdata.length > 0) {
            let all = [];
            mycollectdata.forEach((item) => {
                if (item.flag) all.push(item.collect_id)
            })
            if (all.length > 0) {
                console.log(all);
                axios({
                    method: 'post',
                    url: '/api/front_end/clearCollect',
                    data: {
                        collect_id: all
                    }
                }).then(res => {
                    console.log(res.data);
                    if (res.data.code === '01') {
                        this.data()
                    }
                })
            }
        }
    }
}

export default MyCollect